<template>
  <view class="my_index_wraper">
    <view class="phone_wraper">
      <view class="top_title">{{ userInfo.enterpriseName }}</view>
      <button v-if="!phoneNumber" plain open-type="getPhoneNumber" @getphonenumber="getPhoneNumber" class="phone_main">
        <view class="user_info">
          <img class="l_tu" :src="avatarUrl" />
          <view class="phone_title">请授权登录</view>
        </view>
      </button>
      <view class="phone_main" v-else>
        <view class="user_info">
          <img class="l_tu" src="../static/my/personal.png" />
          <!-- <open-data class="l_tu" type="userAvatarUrl"></open-data> -->
          <view class="val_pho">
            <open-data class="l_text" type="userNickName"></open-data>
            <view class="phone_name">{{ showPhone }}</view>
          </view>
        </view>
      </view>
      <view class="main_wraper_nav">
        <navigator class="item" @click="goOfficialPoint('/point/charge')">
          <view class="num">{{ userInfo.balance || 0 }}</view>
          <view class="text">加油卡</view>
        </navigator>
        <navigator class="item" @click="goOfficialNow('/coupon/index')">
          <view class="num">{{ userInfo.couponCount || 0 }}</view>
          <view class="text">优惠劵</view>
        </navigator>
        <navigator class="item" @click="goOfficialPoint('/point/index')">
          <view class="num">{{ userInfo.integral || 0 }}</view>
          <view class="text">积分</view>
        </navigator>
      </view>
    </view>
    <view class="my_index">
      <footer class="bottom">
        <view class="cont_title">会员专属</view>
        <view class="cont">
          <navigator class="item" @click="goOfficialNow('/record/consume')">
            <view class="icon jilu"></view>
            <view class="text">我的订单</view>
          </navigator>
          <view class="item" @click="goOfficialNow('/fuel/fuel')">
            <view class="icon jiayou"></view>
            <view class="text">油站导航</view>
          </view>
          <!-- <navigator class="item" @click="goOfficialNow('/coupon/get')">
            <view class="icon lingqu"></view>
            <view class="text">推荐有奖</view>
          </navigator> -->
          <navigator class="item" @click="goOfficialNow('/setting/info')">
            <view class="icon geren"></view>
            <view class="text">个人资料</view>
          </navigator>
          <navigator class="item" @click="goOfficialPoint('/nowPrice/index')">
            <view class="icon jinri"></view>
            <view class="text">今日油价</view>
          </navigator>
        </view>
      </footer>
      <view class="goApplet">
        <view class="item">
          <view class="text" @click="goOfficialNow('/fuel/fuel')">快捷加油</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { mapMutations } from "vuex";
import WXBizDataCrypt from "./WXBizDataCrypt.js";
import settings from "@/settings.js";
export default {
  data() {
    return {
      avatarUrl: "https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0",
      showGoApplet: true,
      infoData: {},
      scanShow: false,
      initShow: false,
      userInfo: {},
      // stationId: 239, //  康裕 测试的id
      // stationId: 226, //  康裕 生产的id
      // stationId: 1419, // 南坑石化
      stationId: settings.stationId,
      issueId: "",
      session_key: "",
      userList: {},
    };
  },
  computed: {
    // 展示的油站信息
    showPhone() {
      const phone = this.phoneNumber + "";
      return phone.replace(phone.substring(3, 7), "****");
    },
  },
  onLoad(option) {
    // this.updateEnterpriseId("137"); // 康裕生产的id
    // this.updateEnterpriseId("194"); // 康裕测试的id
    // this.updateEnterpriseId("666"); // 南坑石化生产
    this.updateEnterpriseId(settings.enterpriseId);
    if (option.q && option.q != "undefined") {
      // 获取到二维码原始链接内容
      const qrUrl = decodeURIComponent(option.q);
      //此处就是我们要获取的参数 json，通过方法解析
      let jsonUrl = this.GetwxUrlParam(qrUrl);
      //比如我要得到id的值，直接取值即可
      let enterpriseId = jsonUrl.enterpriseId;
      this.stationId = jsonUrl.stationId;
      console.log(jsonUrl, "巡逻点ID：" + enterpriseId);
      this.enterpriseId = enterpriseId;
      this.updateEnterpriseId(enterpriseId);
      this.initShow = true;
    } else {
      this.initShow = true;
    }
  },
  onShow() {
    const this_ = this;
    if (this.phoneNumber) {
      this.getUserInfo();
    } else this.getOpenId();
    if (!this.userInfo) {
      wx.getUserInfo({
        success: function (res) {
          this_.gender = res.userInfo.gender;
        },
      });
    }
  },
  watch: {
    phoneNumber(newval, oldval) {
      if (this.phoneNumber) {
        this.getUserInfo();
      }
    },
    enterpriseId(newval, oldval) {
      // 康裕石化能源： 生产id是 137  测试id是194
      //  南坑石化 666
      // if (this.enterpriseId !== "666") {
      //   this.getOpenId();
      // }
      if (this.enterpriseId !== settings.enterpriseId) {
        this.getOpenId();
      }
    },
  },
  methods: {
    ...mapMutations({
      updateOpenId: "updateOpenId",
      updatePhoneNumber: "updatePhoneNumber",
      updateEnterpriseId: "updateEnterpriseId",
    }),
    goOfficialPoint(url) {
      if (!this.phoneNumber) {
        uni.showToast({
          title: "请授权登录",
          icon: "error",
        });
        return;
      }
      uni.navigateTo({
        url: `/subPackB${url}`,
      });
    },
    GetwxUrlParam(url) {
      let theRequest = {};
      if (url.indexOf("#") != -1) {
        const str = url.split("#")[1];
        const strs = str.split("&");
        for (let i = 0; i < strs.length; i++) {
          theRequest[strs[i].split("=")[0]] = decodeURI(strs[i].split("=")[1]);
        }
      } else if (url.indexOf("?") != -1) {
        const str = url.split("?")[1];
        const strs = str.split("&");
        for (let i = 0; i < strs.length; i++) {
          theRequest[strs[i].split("=")[0]] = decodeURI(strs[i].split("=")[1]);
        }
      }
      return theRequest;
    },
    goOfficialNow(url) {
      if (!this.phoneNumber) {
        uni.showToast({
          title: "请授权登录",
          icon: "error",
        });
        return;
      }
      uni.navigateTo({
        url: `/subPack${url}`,
      });
    },

    async getUserInfo() {
      try {
        if (this.phoneNumber) {
          const infoData = await this.$Request({
            url: "/selectMemberInfo",
            method: "GET",
            data: {
              enterpriseId: this.enterpriseId,
              mobilePhone: this.phoneNumber,
            },
          });
          if (infoData.retCode !== 0) {
            throw new Error(infoData.message);
          }
          this.userInfo = infoData.data;
        }
      } catch (error) {}
    },
    scanCode() {
      // 允许从相机和相册扫码
      uni.scanCode({
        success: function (res) {
          console.log("条码类型：" + res.scanType);
          console.log("条码内容：" + res.result);
        },
      });
    },
    goOfficial() {
      this.$refs.child.goOfficial();
    },

    async getOpenId() {
      const this_ = this;
      uni.login({
        provider: "weixin",
        success: async (res) => {
          this_.code = res.code;
          // const gzhAuthenRes = await this.$Request({
          //   url: "/getPaySessionKeyAndOpenID",
          //   method: "GET",
          //   data: {
          //     code: res.code,
          //     enterpriseId: this.enterpriseId,
          //   }
          // });
          // if (gzhAuthenRes.retCode === 0) {
          //   const openId = gzhAuthenRes.data.openId;
          //   this_.session_key=gzhAuthenRes.data.sessionKey
          //   this_.updateOpenId(openId)
          // }
        },
      });
    },

    // 获取手机号
    async getPhoneNumber(info) {
      uni.showLoading({
        title: "获取中...",
        mask: true,
      });
      if (info.detail.errMsg === "getPhoneNumber:ok") {
        // let pc = new WXBizDataCrypt('wx3d56fc8b214444d2', this.session_key);
        // let pc = new WXBizDataCrypt('wxf24a5561a44f6d55', this.session_key); //
        // let data = pc.decryptData(info.detail.encryptedData , info.detail.iv);
        const encryptedData = info.detail.encryptedData;
        const iv = info.detail.iv;
        const infoData = await this.$Request({
          url: "/loginGetPhone",
          method: "GET",
          data: {
            code: this.code,
            stationId: this.stationId,
            encryptedData,
            iv,
            version: 2,
            blogNickName: "微信用户",
            sexFlag: this.gender || 0,
            blogProfilePhoto: this.avatarUrl,
          },
        });
        const openId = infoData.data.openId;
        this.updateOpenId(openId);
        const phone = infoData.data.phoneNumber;
        this.phoneNumber = infoData.data.phoneNumber;
        this.updatePhoneNumber(phone);
        uni.hideLoading();
      } else {
        uni.hideLoading();
        uni.showToast({
          title: "请授权登录~",
          icon: "error",
        });
        this.getOpenId();
      }
    },
  },
};
</script>

<style lang="scss">
.my_index_wraper {
  background-color: #f5f6f7;
  width: 100vw;
  box-sizing: border-box;
  min-height: 100vh;
  .phone_wraper {
    padding: 40rpx 20rpx 20rpx;
    box-sizing: border-box;
    width: 100%;
    background: url("../static/my/beijing.png") no-repeat 0 0;
    background-size: 100% 100%;
    .top_title {
      color: #fff;
      font-size: 34rpx;
      margin: 50rpx 0 40rpx;
      height: 40rpx;
      letter-spacing: 4rpx;
    }
    .main_wraper_nav {
      display: flex;
      justify-content: space-between;
      margin: 80rpx 0 20rpx;
      width: 100%;
      .item {
        display: flex;
        flex-direction: column;
        align-items: center;
        .text {
          color: #fff;
          font-size: 32rpx;
          text-align: center;
          width: 150rpx;
          margin-top: 10rpx;
          letter-spacing: 4rpx;
        }
        .num {
          letter-spacing: 4rpx;
          font-size: 28rpx;
          color: #fff;
        }
      }
    }
    .phone_main {
      display: flex;
      width: 100%;
      height: 100rpx;
      align-items: center;
      padding: 20rpx 30rpx;
      box-sizing: border-box;
      color: #fff;
      border: none;
      .user_info {
        display: flex;
        .l_tu {
          overflow: hidden;
          border-radius: 50%;
          height: 70rpx;
          width: 70rpx;
          margin-right: 10px;
        }
        .val_pho {
          display: flex;
          flex-direction: column;
          justify-content: center;
          .phone_name {
            font-size: 26rpx;
            letter-spacing: 4rpx;
          }
        }
        .phone_title {
          margin-top: -10rpx;
          font-size: 24rpx;
          letter-spacing: 4rpx;
          margin-left: 10rpx;
        }
      }
    }
  }
}
.bacggroud_wraper {
  width: 100%;
  box-sizing: border-box;
  .bacggroud_wraper_val {
    width: 100%;
    box-sizing: border-box;
    height: 180rpx;
  }
}

.my_index {
  padding: 10rpx 0rpx 0;
  .bottom {
    width: 100%;
    box-sizing: border-box;
    padding: 30rpx 20rpx;
    box-sizing: border-box;
    background-color: #fff;
    width: 100%;
    margin-top: 20rpx;
    > .title {
      color: #404040;
      font-weight: bolder;
      font-size: 28rpx;
    }
    .cont_title {
      color: #999;
      font-size: 26rpx;
      margin: 0rpx 0 40rpx;
    }
    > .cont {
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;

      .item {
        width: 120rpx;
        margin-right: 35rpx;
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-bottom: 60rpx;
        .icon {
          width: 36rpx;
          height: 36rpx;
          background-size: 100% 100%;
          margin-bottom: 20rpx;
        }
        .text {
          height: 32rpx;
          color: #000;
          font-size: 24rpx;
          text-align: center;
          width: 150rpx;
        }
        &:nth-child(4n) {
          margin-right: 0;
        }
      }
      .item {
        .geren {
          background: url("../static/my/geren.png") no-repeat 0 0;
          background-size: 100% 100%;
        }
      }
      .item {
        .jiayou {
          background: url("../static/my/jiayou.png") no-repeat 0 0;
          background-size: 100% 100%;
        }
      }
      .item {
        .jilu {
          background: url("../static/my/jilu.png") no-repeat 0 0;
          background-size: 100% 100%;
        }
      }
      .item {
        .lingqu {
          background: url("../static/my/lingqu.png") no-repeat 0 0;
          background-size: 100% 100%;
        }
      }
      .item {
        .jinri {
          background: url("../static/my/jinri.png") no-repeat 0 0;
          background-size: 100% 100%;
        }
      }
    }
  }
  .goApplet {
    width: 100%;
    height: 150rpx;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 0 auto;
    text-align: center;
    .item {
      margin: 20rpx auto 0;
      width: 640rpx;
      height: 90rpx;
      // background: linear-gradient(-67deg, #48b353, #56d16c,);
      background-color: #fc6703;
      font-size: 36rpx;
      color: #fff;
      line-height: 90rpx;
      .text {
        align-items: center;
        display: flex;
        justify-content: center;
      }
    }
  }
}
</style>
